<template>
  <div class="test-api">
    <h2>API连接测试</h2>
    
    <el-button @click="testGradesApi" type="primary">
      测试年级API
    </el-button>
    
    <el-button @click="testKnowledgePointsApi" :disabled="!selectedGradeId">
      测试知识点API
    </el-button>
    
    <el-select v-model="selectedGradeId" placeholder="选择年级" style="width: 200px; margin-left: 20px;">
      <el-option
        v-for="grade in grades"
        :key="grade.id"
        :label="grade.name"
        :value="grade.id"
      />
    </el-select>
    
    <div v-if="apiResult" class="result">
      <h3>API响应:</h3>
      <pre>{{ apiResult }}</pre>
    </div>
    
    <div v-if="apiError" class="error">
      <h3>API错误:</h3>
      <pre>{{ apiError }}</pre>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'
import { mathTestApi } from '@/api/mathTest'

const grades = ref<any[]>([])
const selectedGradeId = ref<number | null>(null)
const apiResult = ref<any>(null)
const apiError = ref<any>(null)

const testGradesApi = async () => {
  try {
    console.log('测试年级API...')
    const response = await mathTestApi.getGrades()
    console.log('年级API响应:', response)
    grades.value = response
    apiResult.value = response
    apiError.value = null
    ElMessage.success('年级API测试成功！')
  } catch (error) {
    console.error('年级API错误:', error)
    apiError.value = error
    apiResult.value = null
    ElMessage.error('年级API测试失败')
  }
}

const testKnowledgePointsApi = async () => {
  if (!selectedGradeId.value) {
    ElMessage.warning('请先选择年级')
    return
  }
  
  try {
    console.log('测试知识点API...', selectedGradeId.value)
    const response = await mathTestApi.getKnowledgePoints(selectedGradeId.value)
    console.log('知识点API响应:', response)
    apiResult.value = response
    apiError.value = null
    ElMessage.success('知识点API测试成功！')
  } catch (error) {
    console.error('知识点API错误:', error)
    apiError.value = error
    apiResult.value = null
    ElMessage.error('知识点API测试失败')
  }
}
</script>

<style scoped>
.test-api {
  padding: 20px;
}

.result, .error {
  margin-top: 20px;
  padding: 15px;
  border-radius: 5px;
  background: #f5f5f5;
}

.error {
  background: #ffe6e6;
  color: #d63031;
}

pre {
  white-space: pre-wrap;
  word-wrap: break-word;
}
</style>